<template>
  <div class="global-main">
    <div class="w">
      <div class="content-search-box global-content">
        <el-form class="el-form">
          <el-form-item label="内容：">
            <el-input
              placeholder="搜索当前分类下的内容"
              clearable
              style="width: 240px"
            />
          </el-form-item>
          <el-button type="primary">搜索</el-button>
        </el-form>
      </div>
      <el-menu mode="horizontal">
        <el-menu-item index="1">推荐</el-menu-item>
        <el-menu-item index="2">最新</el-menu-item>
        <el-menu-item index="3">最热</el-menu-item>
      </el-menu>
      <div
        class="content-list global-content"
        v-for="(item, index) in 10"
        :key="index"
      >
        <div class="content-list-item">
          <div class="user-title">
            <Avatar
              src="http://img.duoziwang.com/2018/05/201712310119033.jpg"
            />
            <div class="title-username">
              <h4>昵称</h4>
            </div>
          </div>
          <!-- 标题 -->
          <div class="question-title">
            <router-link :to="`/qa/${item}`">问题标题</router-link>
          </div>
          <div class="question-content">
            <router-link :to="`/qa/${item}`">
              <el-text line-clamp="2">内容区</el-text>
            </router-link>
          </div>
          <div class="item-footer">
            <!-- 底部时间 -->
            <div class="footer-date flex-box-gap">2023-10-23 09:29</div>
            <el-divider direction="vertical" />
            <!-- 底部点赞 -->
            <div class="like-box flex-box-gap">
              <svg-icon
                name="like"
                class="svg"
                width="1em"
                height="1em"
              ></svg-icon>
              <div>3</div>
            </div>
            <el-divider direction="vertical" />
            <!-- 底部评论 -->
            <div
              class="commet-box flex-box-gap"
              @click="handleCommentBox(index)"
            >
              <svg-icon
                name="chat"
                class="svg"
                width="1em"
                height="1em"
              ></svg-icon>
              <div v-show="!editorIsShowArr[index]">3</div>
              <div v-show="editorIsShowArr[index]">收起评论</div>
            </div>
          </div>
        </div>
        <MyEditor :commentNum="3" :key="index" v-if="editorIsShowArr[index]" />
      </div>
    </div>
  </div>
</template>

<script setup>
import MyEditor from '@/components/Editor/index.vue'
import Avatar from '@/components/Avatar/index.vue'
import { ref } from 'vue'
import { debounce } from 'lodash' // 引入防抖函数
//是否显示评论框
let editorIsShowArr = ref(Array(10).fill(false))

const handleCommentBox = debounce((index) => {
  editorIsShowArr.value[index] = !editorIsShowArr.value[index]
}, 300) // 1000毫秒的防抖延迟，可以根据需要调整
</script>

<style lang="scss" scoped>
/* 背景区 */
.global-main {
  .content-search-box {
    margin-bottom: 20px;
    .el-form {
      display: flex;
      justify-content: space-between;
    }
  }
  /* 问答列表 */
  .content-list {
    margin-bottom: 15px;
    padding: 24px;
    .content-list-item {
      display: flex;
      flex-direction: column;
      margin-bottom: 15px;
      .user-title {
        display: flex;
        align-items: center;

        .title-username {
          margin: 0 10px;
          font-size: 16px;
        }
      }
      .question-title {
        margin: 14px 0;
        font-weight: 600;
        font-size: 16px;
        line-height: 1.5;
        color: rgba(0, 0, 0, 0.85);
        &:hover {
          color: #1890ff !important;
        }
      }
      .question-content {
        font-size: 15px;
      }
      .item-footer {
        display: flex;
        align-items: center;
        margin-top: 16px;
        .flex-box-gap {
          display: flex;
          gap: 8px;
          align-items: center;
          &:hover {
            background: rgba(0, 0, 0, 0.018);
          }
        }
        .footer-date {
          color: rgba(0, 0, 0, 0.45);
          margin-right: 16px;
        }
        .like-box {
          cursor: pointer;
          margin: 0 16px;
          display: flex;
          gap: 8px;
        }
        .commet-box {
          cursor: pointer;
        }
      }
    }
  }
}
</style>
